<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
	</view>

	<!-- @click是点击后执行toDemo()方法 -->
	<button @click="toDemo()">跳转到Demo页面</button>

	<button @click="toLogin()">跳转到登录页面</button>

	<button @click="toType()">跳转到分类页面</button>

	<view class="content">
		<text>你的名字：</text>
		<input v-model="name" placeholder="请输入你的名字"/>
	</view>

	<button @click="postHello()">提交</button>

	<button @click="logout()">退出登录</button>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import helloApi from '../../apis/hello';
import userApi from '../../apis/user';

const title = ref('你好，世界');

const name = ref('张三');

// 点击按钮后跳转到Demo页面
const toDemo = () => {
	uni.navigateTo({
		// 跳转到/pages/index/demo，参考pages.json里边存在的页面
		url: '/pages/index/demo'
	})
}

// 点击按钮后跳转到登录页面
const toLogin = () => {
	uni.navigateTo({
		// 跳转到/pages/user/login，参考pages.json里边存在的页面
		url: '/pages/user/login'
	})
}

// 发起一个Get请求
const getHelloTest = async () => {
	const result = await helloApi.getTest()

	console.log(result);

	uni.showToast({
		title: result.msg
	})
}

// 点击按钮后提交数据
const postHello = async () => {
	// 请求参数
	const data = {
		// 这里是你的名字
		name: name.value,
	}

	// 发起一个Post请求
	const result = await helloApi.postHello(data);


	uni.showToast({
		title: result.msg
	})

}

// 获取本地存储的用户信息
const getStorageUserInfo = () => {
	const userInfo = JSON.parse(uni.getStorageSync('user') || '{}');
	if (userInfo.id) {
		title.value = '欢迎：' + userInfo.username
	}
}

const logout = async () => {
	const userInfo = JSON.parse(uni.getStorageSync('user') || '{}');
	console.log(userInfo)
	const data = {
		refreshToken: userInfo.refresh_token
	}
	// 如果没有登录，提示登录
	if (!userInfo.id) {
		uni.showToast({
			title: '请先登录',
			icon: 'error',
		}).then(() => {
			uni.navigateTo({
				url: '/pages/user/login'
			})
		})
		return
	}
	const result = await userApi.logout(data);
	// 如果退出成功，清除本地存储的用户信息
	if (result.code === 1) {
		uni.showToast({
			title: '退出成功',
			icon: 'success',
		}).then(() => {
			// 清除本地存储的用户信息
			uni.removeStorageSync('user')
			title.value = '你好，世界'
		})
	}
}

const toType = () => {
	uni.navigateTo({
		url: '/pages/type/index'
	})
}

//  页面挂载完成后执行
onMounted(() => {
	getHelloTest()
	getStorageUserInfo()
})
</script>
<style scoped lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin: 200rpx auto 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.content {
	margin: 20rpx;
}
</style>
